<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商品列表</title>
    <link rel="stylesheet/less" href="./asset/less/productlist.less">
    <link rel="stylesheet" href="../asset/fontAwesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="./asset/bootstrap/css/bootstrap.min.css">
    <script src="../asset/js/less.js"></script>
</head>

<body>
    <!-- 头部区域 -->
    <header id="header">
        <div id="hearder1">
            <div class="logo ">
                <a href="index.html">
                    <img src="../asset/image/header.png" alt="">
                </a>
            </div>
            <div class="appdown">
                <a href="#">
                    <img src="../asset/image/download.png" alt="">
                </a>
            </div>
        </div>
        <!-- 搜索框部分 -->
        <div id="search1">
            <form action="" method="">
                <input type="text" placeholder="请输入你想比价的商品">
            </form>
            <div class="searchbtn">
                <input type="submit" value="搜索">
            </div>
        </div>
    </header>
    <!-- 主体区域 -->
    <main id="main">
        <!-- 切换栏 -->
        <section id="Switch">
            <div class="reorder">
                <ul>
                    <li>
                        <a href="index.html">首页></a>
                    </li>
                    <li>
                        <a href="category.html">全部分类></a>
                    </li>
                    <li>
                        <a href="#">电视</li>
                </ul>
                <button class="btn btn-info">筛选</button>
            </div>
        </section>
        <!-- 商品主体 -->
        <section id="commodity">
            <!-- 商品列表 -->
            <div class="product-list">
                <ul>
                    <li>
                        <a href="" title="海信(Hisense) LED55EC500U 55英寸 4K超高清  智能液晶电视">
                            <div class="pic">
                                <img src="http://pro-img.zuyushop.com/ProPic/20179/Thumb/Thumb_2017090008503540540.jpg" width="100" height="100" alt="海信(Hisense) LED55EC500U 55英寸 4K超高清  智能液晶电视">
                            </div>
                            <div class="info">
                                <div class="tit">海信(Hisense) LED55EC500U 55英寸 4K超高清 智能液晶电视</div>
                                <div class="price">
                                    <em>￥2299.00</em>
                                </div>
                                <div class="other">
                                    <em>报价(5)</em>
                                    <em>全网评论(398690)</em>
                                </div>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </section>
    </main>

    <!-- 分页模块 -->
    <div class="page">
        <button class="btn btn-default shang">上一页</button>
        <select class="selectt">
            <option value="1">1/10</option>
            <option value="1">2/10</option>
            <option  value="1">3/10</option>
            <option value="1">4/10</option>
            <option value="1">5/10</option>
        </select>
        <button class="btn btn-default next">下一页</button>
    </div>


    <!-- 底部部分 -->
    <div id="footer">
        <div class="foot_top">
            <a href="login.html">登录</a>
            <a href="register.html">注册</a>
            <a href="#" style="width: 40%; border: 0;">
                <img src="./asset/image/top.jpg" width="15" height="15">返回顶部</a>
        </div>
        <div class="foot_bottom">
            <p>
                <a href="#" style="color: Red;">手机APP下载</a>
                <a href="#">慢慢买手机版</a>
                -- 掌上比价平台
            </p>
            <p>m.manmanbuy.com </p>
        </div>
    </div>

    <!-- 广告部分 -->
    <div id="advertisement">
        <a class="closefix" href="javascript:;"></a>
        <div class="icon"></div>
        <p class="titlefix">实时更新品牌榜</p>
        <p class="describe">全网比价不吃亏</p>
        <a class="download-btn" href="#" onclick="trackEvent('底部悬浮下载');">立即打开</a>
    </div>
</body>

</html>

<script src="./asset/zepto/zepto.min.js"></script>
<script src="./asset/artTemplate/template-web.js"></script>
<!-- 导航栏模板 -->
<script id="top-nav" type="text/html">
    <li>
        <a href="index.html">首页></a>
    </li>
    <li>
        <a href="category.html">全部分类></a>
    </li>
    {{each result as value}}
    <li>
        <a href="#">{{value.category}}</li>
    {{/each}}
</script>
<!-- 商品模板 -->
<script id="goods" type="text/html">
    {{each result as value}}
        <li>
            <a href="productdesc.html?productid={{value.productId}}&category={{category}}">
                <div class="pic">
                    {{#value.productImg}}
                </div>
                <div class="info">
                    <div class="tit">{{value.productName}}</div>
                    <div class="price">
                        <em>{{value.productPrice}}</em>
                    </div>
                    <div class="other">
                        <em>{{value.productQuote}}</em>
                        <em>{{value.productCom}}</em>
                    </div>
                </div>
            </a>
        </li>
    {{/each}}
</script>
<!-- 页码模板 -->
<script id="page" type="text/html">
    <% for(var i=1;i<=totlaPage;i++){ %>
            <option value="<%= i %>"><%= (i) %>/<%=totlaPage %></option>
            <% }%>
</script>
<script src="./asset/js/url.js"></script>
<script src="./asset/js/productlist.js"></script>